<template>
  <el-dialog
    :close-on-click-modal="false"
    v-model="this.visible"
    :title="title"
    width="500px"
    @close="cancel"
  >
    <el-form :rules="rules" ref="form" :model="form" label-position="top">
      <el-form-item
        v-if="visibleField"
        :label="$t('manufacturer.account')"
        prop="username"
      >
        <el-input
          v-model="form.username"
          maxlength="64"
          @blur="() => (form.username = form.username.trim())"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('manufacturer.name')" prop="name">
        <el-input
          v-model="form.name"
          maxlength="256"
          @blur="() => (form.name = form.name.trim())"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('manufacturer.shortName')" prop="shortName">
        <el-input
          v-model="form.shortName"
          maxlength="256"
          show-word-limit
          @blur="() => (form.shortName = form.shortName.trim())"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('manufacturer.manufacturerCode')" prop="manufacturerCode">
        <el-input
          :disabled="!visibleField"
          maxlength="4"
          show-word-limit
          v-model="form.manufacturerCode"
          @blur="() => (form.manufacturerCode = form.manufacturerCode.trim())"
          placeholder="code cannot exceed 4 characters"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('manufacturer.address')">
        <el-input
          v-model="form.address"
          maxlength="128"
          @blur="() => (form.address = form.address.trim())"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('manufacturer.email')" prop="email">
        <el-input
          v-model="form.email"
          maxlength="128"
          @blur="() => (form.email = form.email.trim())"
          show-word-limit
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button text @click="cancel">{{ $t("common.cancel") }}</el-button>
        <el-button type="primary" :loading="loading" @click="dataFormSubmit">{{
          $t("common.confirm")
        }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { addManufacturer } from "@/api/device";
import { queryManufacturer, updateManufacturer } from "@/api/manufacturer";
export default {
  data() {
    return {
      loading: false,
      id: null,
      form: {
        name: "",
        manufacturerCode: "",
        address: "",
        email: "",
        shortName: "",
        username: "",
      },
      imgPath: "",
      fileList: [],
      hideUpload: false,
      rules: {
        name: [
          {
            required: true,
            message: this.$t("common.nullInputTip"),
            trigger: "change",
          },
        ],
        email: [
          {
            required: true,
            message: this.$t("common.nullInputTip"),
            trigger: "change",
          },
        ],
        shortName: [
          {
            required: true,
            message: this.$t("common.nullInputTip"),
            trigger: "change",
          },
        ],
        username: [
          {
            required: true,
            message: this.$t("common.nullInputTip"),
            trigger: "change",
          },
        ],
        manufacturerCode: [
          {
            required: true,
            message: this.$t("common.nullInputTip"),
            trigger: "change",
          },
        ],
      },
      visible: false,
      visibleField: true,
      title: "",
      operation: "",
    };
  },
  methods: {
    dataFormSubmit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.id) {
            //  Update Manufacturer
            console.log(this.form);
            updateManufacturer(this.id, this.form)
              .then((data) => {
                this.$message({
                  type: "success",
                  message: this.$t("common.success"),
                });
                this.cancel();
                this.$emit("refreshDataList");
              })
              .catch((e) => {
                this.$confirmError(e);
                this.loading = false;
              });
          } else {
            if (this.form.username.length < 5) {
              return this.$message.warning(
                this.$t("common.inter_string_lenght_tip", {
                  field: this.$t("manufacturer.account"),
                  number: 5,
                })
              );
            }
            // Add Manufacturer
            this.$confirm(this.$t("manufacturer.addConfirm"), "", {
              confirmButtonText: this.$t("common.confirm"),
              cancelButtonText: this.$t("common.cancel"),
              type: "warning",
            }).then(() => {
              this.loading = true;
              addManufacturer(this.form)
                .then((data) => {
                  this.$message({
                    type: "success",
                    message: this.$t("common.success"),
                  });
                  this.cancel();
                  this.$emit("refreshDataList");
                })
                .catch((e) => {
                  this.$confirmError(e);
                  this.loading = false;
                });
              console.log(this.form);
            });
          }
        }
      });
    },
    init(id) {
      this.loading = false;
      this.visible = true;
      if (id) {
        this.title = this.$t("manufacturer.updateBtn");
        this.id = id;
        this.visibleField = false;
        queryManufacturer(id)
          .then((result) => {
            console.log(result);
            this.form = result;
          })
          .catch((e) => {
            this.$confirmError(e);
          });
      } else {
        this.title = this.$t("manufacturer.addBtn");
      }
    },
    cancel() {
      this.loading = false;
      this.visible = false;
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss">
.same {
  padding: 0;
  text-align: center;
  margin: 0 auto;
  height: 47px;
  vertical-align: middle;
  font-size: 0px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 140px;
  height: 140px;
  line-height: 140px;
  text-align: center;
}
.avatar {
  width: 140px;
  height: 140px;
  display: block;
}
</style>
